<page-header></page-header>

<p>
  The following examples use the
  <a href="https://ng-matero.github.io/extensions/components/datetimepicker" target="_blank">
    <code>datetimepicker</code></a> component of
  <a href="https://github.com/ng-matero/extensions" target="_blank">Material Extensions</a>.
</p>

<mat-card>
  <mat-card-header>
    <mat-card-title>Date types with: {{ type }}</mat-card-title>
  </mat-card-header>

  <mat-card-content>
    <form [formGroup]="group">
      <mat-form-field>
        <mat-label>DateTime</mat-label>
        <mtx-datetimepicker-toggle [for]="datetimePicker" matSuffix></mtx-datetimepicker-toggle>
        <mtx-datetimepicker #datetimePicker startView="month" [timeInterval]="5">
        </mtx-datetimepicker>
        <input [mtxDatetimepicker]="datetimePicker" [max]="tomorrow" [min]="today"
               autocomplete="false" formControlName="dateTime" matInput required>
        <mat-error *ngIf="group.get('dateTime')?.errors?.required">required</mat-error>
        <mat-error *ngIf="group.get('dateTime')?.errors?.mtxDatetimepickerMin">min</mat-error>
        <mat-error *ngIf="group.get('dateTime')?.errors?.mtxDatetimepickerMax">max</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label>DateTime with manual input</mat-label>
        <mtx-datetimepicker-toggle [for]="datetimePickerManual" matSuffix>
        </mtx-datetimepicker-toggle>
        <mtx-datetimepicker #datetimePickerManual startView="month" [timeInterval]="5"
                            [timeInput]="true"></mtx-datetimepicker>
        <input [mtxDatetimepicker]="datetimePickerManual" [max]="tomorrow" [min]="today"
               autocomplete="false" formControlName="dateTimeManual" matInput required>
        <mat-error *ngIf="group.get('dateTimeManual')?.errors?.required">required</mat-error>
        <mat-error *ngIf="group.get('dateTimeManual')?.errors?.mtxDatetimepickerMin">min</mat-error>
        <mat-error *ngIf="group.get('dateTimeManual')?.errors?.mtxDatetimepickerMax">max</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label>DateTime Year selector</mat-label>
        <mtx-datetimepicker-toggle [for]="datetimeYearPicker" matSuffix></mtx-datetimepicker-toggle>
        <mtx-datetimepicker #datetimeYearPicker [multiYearSelector]="true" startView="month"
                            [timeInterval]="5"></mtx-datetimepicker>
        <input [mtxDatetimepicker]="datetimeYearPicker" [max]="tomorrow" [min]="today"
               autocomplete="false" formControlName="dateTimeYear" matInput required>
        <mat-error *ngIf="group.get('dateTimeYear')?.errors?.required">required</mat-error>
        <mat-error *ngIf="group.get('dateTimeYear')?.errors?.mtxDatetimepickerMin">min</mat-error>
        <mat-error *ngIf="group.get('dateTimeYear')?.errors?.mtxDatetimepickerMax">max</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label>Time</mat-label>
        <mtx-datetimepicker-toggle [for]="timePicker" matSuffix></mtx-datetimepicker-toggle>
        <mtx-datetimepicker #timePicker [timeInterval]="5" type="time">
        </mtx-datetimepicker>
        <input [mtxDatetimepicker]="timePicker" formControlName="time" matInput required>
        <mat-error *ngIf="group.get('time')?.errors?.required">required</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label>Time AM/PM</mat-label>
        <mtx-datetimepicker-toggle [for]="timeAMPMPicker" matSuffix></mtx-datetimepicker-toggle>
        <mtx-datetimepicker #timeAMPMPicker [timeInterval]="5" [twelvehour]="true" type="time">
        </mtx-datetimepicker>
        <input [mtxDatetimepicker]="timeAMPMPicker" formControlName="timeAMPM" matInput required>
        <mat-error *ngIf="group.get('timeAMPM')?.errors?.required">required</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label>DateTime AM/PM with manual input</mat-label>
        <mtx-datetimepicker-toggle [for]="timeAMPMPickerManual" matSuffix>
        </mtx-datetimepicker-toggle>
        <mtx-datetimepicker #timeAMPMPickerManual startView="month" [timeInterval]="5"
                            [timeInput]="true" [twelvehour]="true"></mtx-datetimepicker>
        <input [mtxDatetimepicker]="timeAMPMPickerManual"
               autocomplete="false" formControlName="timeAMPMManual" matInput required>
        <mat-error *ngIf="group.get('timeAMPMManual')?.errors?.required">required</mat-error>
        <mat-error *ngIf="group.get('timeAMPMManual')?.errors?.mtxDatetimepickerMin">min</mat-error>
        <mat-error *ngIf="group.get('timeAMPMManual')?.errors?.mtxDatetimepickerMax">max</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label>Date</mat-label>
        <mtx-datetimepicker-toggle [for]="datePicker" matSuffix></mtx-datetimepicker-toggle>
        <mtx-datetimepicker #datePicker type="date"></mtx-datetimepicker>
        <input [mtxDatetimepicker]="datePicker" formControlName="date" matInput required>
        <mat-error *ngIf="group.get('date')?.errors?.required">required</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label>Month</mat-label>
        <mtx-datetimepicker-toggle [for]="monthPicker" matSuffix></mtx-datetimepicker-toggle>
        <mtx-datetimepicker #monthPicker mode="portrait" type="month">
        </mtx-datetimepicker>
        <input [mtxDatetimepicker]="monthPicker" formControlName="month" matInput required>
        <mat-error *ngIf="group.get('month')?.errors?.required">required</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label>Year</mat-label>
        <mtx-datetimepicker-toggle [for]="yearPicker" matSuffix></mtx-datetimepicker-toggle>
        <mtx-datetimepicker #yearPicker type="year"></mtx-datetimepicker>
        <input [mtxDatetimepicker]="yearPicker" formControlName="year" matInput required>
        <mat-error *ngIf="group.get('year')?.errors?.required">required</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label>Min/Max Test</mat-label>
        <input [mtxDatetimepicker]="minTestPicker" [max]="max" [min]="min" formControlName="mintest"
               matInput required>
        <mtx-datetimepicker-toggle [for]="minTestPicker" matSuffix></mtx-datetimepicker-toggle>
        <mtx-datetimepicker #minTestPicker mode="landscape" [timeInterval]="5">
        </mtx-datetimepicker>
        <mat-error *ngIf="group.get('mintest')?.errors?.required">required</mat-error>
        <mat-error *ngIf="group.get('mintest')?.errors?.mtxDatetimepickerMin">min</mat-error>
        <mat-error *ngIf="group.get('mintest')?.errors?.mtxDatetimepickerMax">max</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label>Filter Test</mat-label>
        <input [mtxDatetimepickerFilter]="filter" [mtxDatetimepicker]="filterTestPicker"
               formControlName="filtertest" matInput required>
        <mtx-datetimepicker-toggle [for]="filterTestPicker" matSuffix></mtx-datetimepicker-toggle>
        <mtx-datetimepicker #filterTestPicker mode="landscape" [timeInterval]="5">
        </mtx-datetimepicker>
        <mat-error *ngIf="group.get('filtertest')?.errors?.required">required</mat-error>
        <mat-error
                   *ngIf="group.get('filtertest')?.errors?.mtxDatetimepickerFilter">filter</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label>TouchUi</mat-label>
        <input [mtxDatetimepicker]="touch" [min]="min" formControlName="touch" matInput required>
        <mtx-datetimepicker-toggle [for]="touch" matSuffix></mtx-datetimepicker-toggle>
        <mtx-datetimepicker #touch mode="portrait" [timeInterval]="5" [touchUi]="true">
        </mtx-datetimepicker>
        <mat-error *ngIf="group.get('touch')?.errors?.required">required</mat-error>
      </mat-form-field>
    </form>
  </mat-card-content>
</mat-card>
